const w = document.getElementById('canvasKnow').scrollWidth
      const width = type === 'change' && w || this.open === true && w * 4 / 3 || this.open === false && w * 3 / 4 || w
      const height = document.getElementById('canvasKnow').scrollHeight
      this.graph = new G6.Graph({
        // 1.画图挂载容器id
        container: 'canvasKnow',
        // autoPaint: true,   //视口更改后,自动重新布局,这个参数未生效
        layout: {
          type: 'force',
          preventOverlap: true, // 阻止节点叠在一起
          nodeStrength: -400,
          nodeSize: 60,
          // alpha: 0.1,
          // collideStrength: 1,
          // collideStrength: 0.9,
          linkDistance: (d) => {
            // if (d.target.id === 'node0') {
            //   return 180
            // }
            return 110
          },
          alphaDecay: 0.02,
          edgeStrength: 1
        },
        width: width,
        height: height,
        modes: {
          // 支持的 交互方式
          default: ['drag-canvas', 'zoom-canvas']
        },
        // fitView: true,
        // fitViewPadding: 20,
        animate: true,
        animateCfg: {
          duration: 1000
        },
        // 节点在默认状态下的样式配置（style）和其他配置
        defaultNode: {
          // 节点上的标签文本配置
          shape: 'circle',
          // size: 55,
          style: {
            fill: 'rgb(210, 0, 34)',
            stroke: '#fff' // 边框颜色
          },
          labelCfg: {
            // 节点上的标签文本样式配置
            style: {
              fill: '#000', // 节点标签文字颜色
              fontSize: 11
            }
          }
        },
        // 边默认的属性，包括边的一般属性和样式属性（style）。
        defaultEdge: {
          shape: 'line',
          color: '#000',
          labelCfg: {
            autoRotate: true,
            style: {
              stroke: 'white',
              lineWidth: 3,
              fill: 'rgb(144, 147, 153)',
              fontSize: 10
            }
          },
          style: {
            endArrow: true,
            stroke: 'gray'
          }
        }
      })
      // 读取 data 中的数据源到图上
      this.graph.data(this.datas)
      // 渲染图
      this.graph.render()
      // 点击节点,切换当前节点
      this.graph.on('node:click', (node) => {

      })
      // 节点鼠标进入方法
      this.graph.on('node:mouseenter', (node) => {
        const item = this.datas.nodes.find(
          (item) => item.id === node.item._cfg.id
        )
        // 新品属性
        const obj2 = {
          shape: 'circleBar',
          details: [
            {
              cat: '同类产品',
              values: 23,
              color: 'rgb(243,244,246)',
              attrs: {
                x: -8,
                y: 33,
                img: typeSvg
              }
            },
            {
              cat: '相似产品',
              values: 23,
              color: 'rgb(243,244,246)',
              attrs: {
                x: -8,
                y: -47,
                img: lenSvg
              }
            }
          ]
        }
        const model = node.item._cfg.model
        const nodeObj = obj2
        this.graph.updateItem(node.item._cfg.id, {
          ...item,
          centerColor: item.style.fill,
          ...nodeObj
        })
        node.item.toFront() // 保证被hover的节点始终在上层
      })
      // 鼠标离开时,恢复节点
      this.graph.on('node:mouseleave', (node) => {
        const item = this.datas.nodes.find(
          (item) => item.id === node.item._cfg.id
        )
        this.graph.updateItem(node.item._cfg.id, {
          ...item,
          shape: 'circle'
        })
      })